<template>
  <div>
    <van-nav-bar
      title="购物车"
      right-text="编辑"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="car">
      <div class="item" v-for="(v,index) in arr" :key="index">
       <div class="left">
        <img :src="myimg[index]" alt="">
       </div>
       <div class="right">
        <p class="txt">{{ arr[index] }}</p>   
        <p class="pic">￥{{ mypic[index]*name[index] }}</p>
    数量：<button @click="left(myid[index],index)" >+</button> {{ name[index]}}
    <button @click="right(myid[index],index)" :disabled="bool">-</button><br>
    <button @click="shopdel(myid[index])" class="sc">删除</button>
       </div>
  </div>
    </div>
    <van-submit-bar :price="3050" button-text="提交订单" />
  </div>
</template>

<script>
import service from '../../../utils/service';
import Vue from 'vue';
import { SubmitBar } from 'vant';

Vue.use(SubmitBar);
export default {
  data(){
    return{
     arr:[],
     name:[],
     myid:[],
     myimg:[],
     mypic:[],
     bool:false
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push("./")
    },
    shopdel(id){
      if(confirm('是否删除')){
         console.log("删除");
         service({
            url:"http://118.178.238.19:3001/api/cart/remove",
            method:"post",
            data:{  
              cartid:id,
             
            }
          }).then(res=>{
            console.log("删除购物车",res);
            this.$forceUpdate()

          })

          service({
      url:"http://118.178.238.19:3001/api/cart/updatenum",
      method:"post",
      data:{  
        cartid:id,
        num:num
      }
    }).then(res=>{
       console.log("修改购物车数量",res);
     })

      }else{
        console.log("不删除");
      }
    },
    left(id,index){
      console.log('+',id);
      this.name[index]++
      this.$forceUpdate()
      this.addshop(id, this.name[index])
      
    },
    right(id,index){
      console.log('+',id);
      this.name[index]--
      this.$forceUpdate()

      if(this.name[index]<=0){
        this.bool=true
        service({
            url:"http://118.178.238.19:3001/api/cart/remove",
            method:"post",
            data:{  
              cartid:id,
          }
          }).then(res=>{
            console.log("删除购物车",res);
          })

      
          
      }else{
        this.addshop(id, this.name[index])
      }


      

      this.addshop(id, this.name[index])
    },
    addshop(id,num){
      service({
      url:"http://118.178.238.19:3001/api/cart/updatenum",
      method:"post",
      data:{  
        cartid:id,
        num:num
      }
    }).then(res=>{
       console.log("修改购物车数量",res);
     })
     
    }
    
     },
  mounted(){
    service({
      url:"http://118.178.238.19:3001/api/cart/list",
      method:"post",
      data:{  
        userid:sessionStorage.getItem('userid')
      }
    }).then(res=>{
        console.log("购物车页面",res);

        res.data.data.forEach(element => {
          console.log(element);
            this.arr.push(element.proname);
            this.name.push(element.num);
            this.myid.push(element.cartid);
            this.myimg.push(element.img1);
            this.mypic.push(element.originprice);
            console.log();
        });
      
     }).catch(err=>{})
  },

  
}
</script>

<style scoped>
h1 {
  width: 375px;
   text-align: center;
   background-color: #fef8f8;
   width: 43px;
   line-height: 43px;
}
.car {
  background-color:#fef8f8;
}
 .item {
  width: 345px;
  height: 120px;
  text-align: left;
  border-radius: 10px;
  display: flex;
  margin: 15px;
  background-color: #fff;
 }
 .item .left img {
   width: 80px;
   height: 80px;
 }
 .item .right {
  position: relative;
 }
 .item .right .sc {
  position: absolute;
  background-color: red;
  border: none;
  margin-left: 200px;
  width: 60px;
  height: 25px;
  border-radius: 50px;
  color: #fff;
  bottom: 5px;
 }
 .item .right .txt {
  font-size: 14px;

 }
 .item .right .pic {
  font-size: 14px;
  color: orangered;
 }
</style>